<template>
  <v-card title="获取图表实例" class="mb-50"> 
    <vcu-chart-line :data="chartData" :ec.sync="chart" :title="title" />
  </v-card>
</template>

<script>
export default {
  name: 'get-instance',
  data() {
    return {
      chart: null,
      title: {},
      chartData: {
        dimensions: {
          name: 'Repo',
          data: [
            'Vue.js', 'React', 'Create RA', 'Puppteer', 'Axios',
            'VS Code', 'Prettier', 'RN', 'Element', 'Electron'
          ].reverse()
        },
        measures: [
          {
            name: 'Rising Star',
            data: [
              40000, 27800, 22500, 22000, 21900,
              20200, 17700, 15600, 14900, 14800
            ].reverse()
          }
        ]
      },
    }
  }, 
  mounted () {
    this.$nextTick(() => {
      this.title = {
        text: '获取图表宽高',
        subtext: `宽：${this.chart.getWidth()} / 高：${this.chart.getHeight()}`
      }
    })
  }
}
</script>